<template>
  <div class="logo" style="width: 100%;">
    <router-link :to="{name:'dashboard'}">
      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
      <img v-if="navTheme === 'dark'" src="../../../src/assets/images/logobefroe.png" alt="logo" />
      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
      <img src="../../../src/assets/images/logobefroe.png" alt />
      <h1 v-if="showTitle">{{ title }}</h1>
    </router-link>
  </div>
</template>

<script>
import { mixin } from '@/utils/mixin.js'

export default {
  name: 'Logo',
  mixins: [mixin],
  props: {
    title: {
      type: String,
      default: '',
      required: false
    },
    showTitle: {
      type: Boolean,
      default: true,
      required: false
    }
  }
}
window.onscroll = function() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  const goTop = document.querySelector('.logo')
  console.log(scrollTop)
  if (scrollTop > 0) {
    goTop.style.position = 'fixed'
    goTop.style.zIndex = '55'
    goTop.style.top = '0px'
    console.log('1111111111')
  } else {
    goTop.style.position = 'relative'
  }
}
</script>
<style lang="scss" scoped>
/*缩小首页布 局顶部的高度*/
$height: 59px;

.sider {
  box-shadow: none !important;
  .logo {
    padding: 0px;
    height: $height !important;
    box-shadow: none !important;
    // transition: background 300ms;
    background-color: #cbe6fb !important;

    img {
      width: 120px;
      height: 120px;
      position: absolute;
      top: -30px;
      left: 20px;
    }
    a {
      color: white;
      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  &.light .logo {
    background-color: #cbe6fb;
  }
}
</style>